<template>
  <div class="leftRegion">
    <el-scrollbar :height="scrollerHeight">
      <!-- <div
        class="exhibitionArea"
        :style="{
          width: basicsData.wide + 'px',
          height: basicsData.high + 'px',
        }"
      > -->
        <el-collapse v-model="basicsData.activeNames">
          <el-collapse-item title="Container 布局容器" name="1">
            <draggable
              tag="ul"
              :list="dragData.containerList"
              item-key="key"
              :group="{ name: 'dragGroup', pull: 'clone', put: false }"
              ghost-class="ghost"
              :sort="true"
              :clone="handleFieldWidgetClone"
              @end="onDragEnd"
              @start="onDragStart"
              @remove="onDragRemove"
              @choose="onDragChoose"
              @sort="onDragSort"
              @clone="onDragClone"
              @add="onDragAdd"
              @update="onDragUpdate"
              :move="onDragMove"
            >
              <template #item="{ element: ele }">
                <li
                  :class="[
                    ele.type != 'container' ? 'field-widget-item-left' : '',
                    'field-widget-item',
                  ]"
                  :title="ele.name"
                >
                  <span>
                    {{ ele.name }}
                  </span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
          <el-collapse-item title="布局/间距" name="2">
            <draggable
              tag="ul"
              :list="dragData.layoutList"
              item-key="key"
              :group="{ name: 'dragGroup', pull: 'clone', put: false }"
              ghost-class="ghost"
              :sort="true"
              :clone="handleFieldWidgetClone"
            >
              <template #item="{ element: ele }">
                <li
                  class="field-widget-item field-widget-item-left"
                  :title="ele.name"
                >
                  <span>
                    {{ ele.name }}
                  </span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
          <el-collapse-item title="Form 表单组件" name="3">
            <draggable
              tag="ul"
              :list="dragData.formList"
              item-key="key"
              :group="{ name: 'dragGroup', pull: 'clone', put: false }"
              ghost-class="ghost"
              :sort="true"
              :clone="handleFieldWidgetClone"
            >
              <template #item="{ element: ele }">
                <li
                  class="field-widget-item field-widget-item-left"
                  :title="ele.name"
                >
                  <span>
                    {{ ele.name }}
                  </span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
        </el-collapse>
      <!-- </div> -->
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { deepClone } from "@/utils/index";
import { nanoid } from "nanoid";
import {
  containerList as CONS,
  layoutList as LAYS,
  formList as FORMS,
} from "@/views/pageDesign/components/leftRegion/widgetsConfig";
// import draggable from "vuedraggable";
import draggable from "@marshallswain/vuedraggable";
import useCaHeight from "@/components/hooks/useCaHeight";
import { getContainerByType } from "@/views/pageDesign/components/globalVariable";
import eventBus from "@/components/eventBus";

defineOptions({
  name: "leftRegion",
  inheritAttrs: false,
});

let { scrollerHeight, calculatedAltitude } = useCaHeight();

// 基础数据
let basicsData = reactive({
  activeNames: ["1", "2", "3"], //折叠面板
});
// 拖拽数据
let dragData = reactive({
  containerList: [],
  layoutList: [],
  formList: [],
});

let handleFieldWidgetClone = (origin) => {
  // console.log(origin,"origin");
  let newOrigin = deepClone(origin);
  newOrigin.id = nanoid();
  newOrigin.options.name = newOrigin.id;
  // console.log(newOrigin,"newOrigin");
  if (newOrigin.type === "container") {
    // let newHeader = deepClone(getContainerByType("header"));
    // newHeader.id = nanoid();
    // newHeader.options.name = newHeader.id;
    // newOrigin.widgetList.push(newHeader);
    // let newAside = deepClone(getContainerByType("aside"));
    // newAside.id = nanoid();
    // newAside.options.name = newAside.id;
    // newOrigin.widgetList.push(newAside);
    // let newMain = deepClone(getContainerByType("main"));
    // newMain.id = nanoid();
    // newMain.options.name = newMain.id;
    // newOrigin.widgetList.push(newMain);
  } else if (newOrigin.type === "row") {
    let newCol = deepClone(getContainerByType("col"));
    newCol.id = nanoid();
    newCol.options.name = newCol.id;
    newOrigin.widgetList.push(newCol);
  }

  return newOrigin;
};

let onDragEnd = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("end拖动结束时的回调函数");
  // console.log("to", to);
  // console.log("from", from);
  // console.log("item", item);
  // console.log("clone", clone);
  console.log("oldIndex", oldIndex);
  // console.log("newIndex", newIndex);
  if (oldIndex == 4) {
    eventBus.emit("containerChange", 1);
  }
};
let onDragStart = ({ to, from, item, clone, oldIndex, newIndex }) => {
  if (oldIndex == 4) {
    eventBus.emit("containerChange", 0);
  }
};
let onDragRemove = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("remove单元被移动到另一个列表时的回调函数");
};
let onDragChoose = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("choose选择单元时的回调函数");
};
let onDragSort = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("sort排序发生变化时的回调函数");
};
let onDragClone = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("cloneclone时的回调函数");
};
let onDragAdd = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("add添加单元时的回调函数");
};
let onDragUpdate = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("add排序发生变化时的回调函数");
};
let onDragMove = (origin, origin2) => {
  // if (!!origin.draggedContext && !!origin.draggedContext.element) {
  //   let type = origin.draggedContext.element.type;
  //   if (
  //     type == "container" && (origin.to.className == "el-container" ||origin.to.className == "exhibitionArea")
  //   ) {
  //     return true;
  //   } else {
  //     return false;
  //   }
  // }
};

onMounted(() => {
  calculatedAltitude(45);
  getModules();
  
});

// 获取 Basic 基础组件 json
let getModules = () => {
  dragData.containerList = CONS.map((item) => {
    return {
      key: nanoid(),
      ...item,
    };
  });
  dragData.layoutList = LAYS.map((item) => {
    return {
      key: nanoid(),
      ...item,
    };
  }).filter((item) => {
    return !item.hidden;
  });
  dragData.formList = FORMS.map((item) => {
    return {
      key: nanoid(),
      ...item,
    };
  }).filter((item) => {
    return !item.hidden;
  });
};
</script>

<style lang="scss" scoped>
.leftRegion {
  .field-widget-item {
    height: 32px;
    line-height: 32px;
    width: 110px;
    margin: 2px 6px 6px 0;
    cursor: move;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: 4px;
    padding: 0 8px;
  }
  .field-widget-item:hover {
    color: #409eff;
  }
  .field-widget-item-left {
    // display: inline-block;
    float: left;
  }
}
</style>
